<template>
	<view class="containerbox bgc-white" style="background-color: #4d6d8a;">
		<uv-navbar title="单词标识" auto-back placeholder bg-color="#4d6d8a" left-icon-color="#fff" titleStyle="color:#fff"/>
		<view class="containerbox">
			<template v-for="item,index in groupList">
				<scroll-view class="containerbox px-30" v-if="groupIndex === index">
					<view v-for="child,keys in item" @click="clickItemEvent(index, keys)">
						<c_markitem
							:item="child" 
							:index="keys" 
							:selected="isActive(index, keys)"
							:ischeck="false"
							@play="playEvent(child, index, keys)"
							/>
					</view>
				</scroll-view>
			</template>
		</view>
		
		<view class="flex items-center justify-between bottombox">
			<view class="flex-1">
				<!-- <view>{{groupIndex}}<text class="text-26 text-gray">/{{groupList.length}}</text></view> -->
				<view class="text-26 text-white">
					<text class="text-32 mx-5" style="color: #ff5252;">{{groupIndex + 1}}</text>
					/
					<text class="text-32 text-white mx-5">{{groupList.length}}</text>
				</view>
			</view>
			<view class="btn bgc-warning" v-if="ispaperStatus && groupList.length > 1" @click="nextEvent">{{groupIndex + 1 === groupList.length ? '上' : '下'}}一组</view>
			<view class="btn bgc-warning" @click="shuffleArray">随机</view>
			<view class="btn bgc-primary" @click="shunxuplay">播放</view>
		</view>
		
		<audio />
	</view>
</template>

<script setup>
import { getArticleWordsList_api } from '@/common/apis/course'
import { computed, ref, reactive, onBeforeUnmount } from 'vue'
import c_markitem from './components/markitem.vue'
import { onShow, onLoad, onUnload, onHide } from "@dcloudio/uni-app"

const groupList = ref([])
const groupIndex = ref(0)

const state = reactive({
	selectedItem: null,
	markedItem: { groupIndex: null, childIndex: null }, // 用来存储当前标记的项的索引
});

const ispaperStatus = computed(() => {
	let count = 0
	
	groupList.value.length && groupList.value[groupIndex.value].forEach((item) => {
		console.log('页面上', groupList.value)
		if(item.isclick){
			count++
		}
	})
	if(count === (groupList.value.length && groupList.value[groupIndex.value].length)){
		return true
	} else{
		return false
	}
})



const isActive = (groupIndex, childIndex) => {
	return state.selectedItem && state.selectedItem.groupIndex === groupIndex && state.selectedItem.childIndex === childIndex;
};


/** 上一次播放的位置 */
const playlastIndex = ref([0, 0]);
	
/** 播放结束 */
const playEnd = () => {
	groupList.value[playlastIndex.value[0]][playlastIndex.value[1]].play = false;
};

/** 监听自然结束 */
uni.useAudio.onEnded(playEnd);

/** 监听播放暂停 */
uni.useAudio.onStop(playEnd);

function playEvent(data, index, keys){
	playEnd();
	data.isclick = true
	data.play = true
	playlastIndex.value = [index, keys];
	uni.useAudio.src(data.voiceFile?.url);
}



function clickItemEvent(groupIndex, childIndex){
	state.selectedItem = { groupIndex, childIndex };
}

function nextEvent(){
	if(groupIndex.value + 1 === groupList.value.length){
		groupIndex.value--
	} else{
		groupIndex.value++
	}
	groupList.value[groupIndex.value].forEach((item) => {
		item.isclick = false
	})
}

function shuffleArray(){
	const currentIndex = groupIndex.value;
	const array = groupList.value[currentIndex];
	let i = array.length, temporaryValue, randomIndex;
	while (0 !== i) {
		randomIndex = Math.floor(Math.random() * i);
	    i -= 1;
	    temporaryValue = array[i];
	    array[i] = array[randomIndex];
	    array[randomIndex] = temporaryValue;
	};
	
	const findIndex = array.findIndex(item => item.play);
	playlastIndex.value = [playlastIndex.value[0], !!~findIndex ? findIndex : playlastIndex.value[1]];
	groupList.value[currentIndex] = array;
}

const shunxuIndex = ref(0)
async function shunxuplay(){
	const currentIndex = groupIndex.value;
	
	console.log(1111, shunxuIndex.value + 1)
	if((shunxuIndex.value) === groupList.value[currentIndex].length){
		shunxuIndex.value = 1
	} else{
		shunxuIndex.value++;
	}
	const newIndex = shunxuIndex.value - 1;
	if (newIndex >= 0 && newIndex < groupList.value[currentIndex].length) {
		state.selectedItem = { groupIndex: currentIndex, childIndex: newIndex };
		await playEvent(groupList.value[currentIndex][newIndex], currentIndex, newIndex)
	}
}
onLoad(async (o) => {
	let res = await getArticleWordsList_api({articleId: o.articleId})
	const chunkSize = 5
	for (let i = 0; i < res.length; i += chunkSize) {
	    groupList.value.push(res.slice(i, i + chunkSize));
	}
})

defineExpose({
	nextEvent
})
</script>
<style>
	page{background-color: #4d6d8a;}
</style>
<style lang="scss" scoped>
.bottombox{padding: 20rpx 32rpx;}
.btn{height: 80rpx; border-radius: 12rpx; flex: 1; text-align: center; line-height: 80rpx; color: #fff; font-size: 28rpx;}
.btn+.btn{margin-left: 20rpx;}
</style>